<template>
  <div class="base__table">
    <div class="base__table-panel">
      <div class="base__table-title">
        <div class="text">设备注册列表</div>
        <div class="actions">
          <!-- <el-button type="primary" size="mini" @click="isShowRegisterDialog = true">
            <i class="iconfont icon-register"></i>
            批量注册
          </el-button> -->
        </div>
      </div>
      
      <base-search ref="baseSearch" :formList="searchFormList" @search="search"></base-search>
  
      <el-table :data="tableData" v-loading="tableLoading">
        <el-table-column label="设备编号" prop="id"></el-table-column>
        <el-table-column label="设备名" prop="id"></el-table-column>
        <el-table-column label="产品名称" prop="id"></el-table-column>
        <el-table-column label="设备统一ID" prop="id"></el-table-column>
        <el-table-column label="DeviceName" prop="id"></el-table-column>
        <el-table-column label="生产商" prop="id"></el-table-column>
        <el-table-column label="生产批次" prop="id"></el-table-column>
        <el-table-column label="生产日期" prop="id" width="180px">
          <template slot-scope="{ row }">{{ format_dateTime(row.createTime) }}</template>
        </el-table-column>
        <el-table-column label="注册状态" prop="registerStatus">
          <div slot-scope="{ row }" class="marker" :class="getDeviceRegisterStatusClassName(row.registerStatus)">
            {{ transformDisplayName(dict_deviceRegisterStatus, row.registerStatus) }}
          </div>
        </el-table-column>
        <el-table-column label="操作">
          <table-action slot-scope="{ row }">
            <table-action-item title="详情" class="iconfont icon-eye" @takeAction="showDetailDialog(row)"></table-action-item>
            <table-action-item title="注册" class="iconfont icon-register" @takeAction="showRegisterDialog(row)"></table-action-item>
          </table-action>
        </el-table-column>
      </el-table>
  
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handlePageNumChange"
        :current-page="pageInfo.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total">
      </el-pagination>

      
      <!-- 设备注册 -->
      <el-dialog
        :visible.sync="isShowRegisterDialog"
        title="设备注册"
        :close-on-click-modal="false"
        width="900px">
        <register
          v-if="isShowRegisterDialog"
          :id="currentActionRow.id"
          @complete="registerComplete"
          @close="isShowRegisterDialog=false">
        </register>
      </el-dialog>
      <!-- 设备注册详情 -->
      <el-dialog
        :visible.sync="isShowDetailDialog"
        title="设备注册详情"
        width="900px">
        <detail
          v-if="isShowDetailDialog"
          :id="currentActionRow.id"
          @close="isShowDetailDialog=false">
        </detail>
      </el-dialog>

    </div>
  </div>
</template>


<script>

import {
  transformDisplayName,
  dict_deviceRegisterStatus,
  DEVICE_REGISTER_STATUS_UNDO,
  DEVICE_REGISTER_STATUS_COMPLETE
} from '@/utils/dictionary'
import { format_null, format_dateTime } from '@/utils/formatter'

import BaseSearch from '@/components/BaseSearch'
import TableAction from '@/components/table-action/TableAction'
import TableActionItem from '@/components/table-action/TableActionItem'

import Register from './Register'
import Detail from './Detail'

import { } from '@/api/modules/dictionary'
import { deviceListApi } from '@/api/modules/device/register'

export default {
  name: 'DeviceRegisterTable',
  components: {
    BaseSearch,
    TableAction,
    TableActionItem,
    Register,
    Detail
  },
  data () {
    return {
      dict_deviceRegisterStatus,
      
      searchFormList: [
        { label: '产品', prop: 'productionId', type: 'select', options: [] },
        { label: '生产商', prop: 'manufacturer', type: 'text' },
        { label: '产品批次', prop: 'productionBatchId', type: 'select', options: [] },
        { label: '设备别名', prop: 'deviceNickname', type: 'text' },
        { label: 'DeviceName', prop: 'deviceName', type: 'text' },
      ],
      searchForm: {
        productionId: null,
        manufacturer: null,
        productionBatchId: null,
        deviceNickname: null,
        deviceName: null,
      },

      tableData: [],
      tableLoading: false,
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },

      isShowRegisterDialog: false,
      isShowDetailDialog: false,

      currentActionRow: null,

    }
  },
  methods: {
    format_dateTime,
    transformDisplayName,

    
    search(formData) {
      this.pageInfo.pageNum = 1
      this.searchForm = { ...formData }
      this.getList()
    },
    async getList() {
      this.tableLoading = true
      const params = {
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize,
        ...this.searchForm
      }
      try {
        // const res = await deviceListApi(params)
        const res = {
          data: {
            list: [
              { id: 1, registerStatus: 0, type: 0, createTime: '2022-11-16T10:50:06.123Z' },
              { id: 2, registerStatus: 1, type: 10, createTime: '2022-11-16T10:50:06.123Z' },
              { id: 3, registerStatus: 2, type: null, createTime: '2022-11-16T10:50:06.123Z' },
              { id: 4, registerStatus: null, type: null, createTime: '2022-11-16T10:50:06.123Z' },
            ],
            total: 116
          }
        }


        const { list, total } = res.data
        this.tableData = format_null(list)
        this.pageInfo.total = total

      } catch (err) {
        console.error(err)
      }
      this.tableLoading = false

    },
    handlePageSizeChange(pageSize) {
      this.pageInfo.pageSize = pageSize
      this.getList()
    },
    handlePageNumChange(pageNum) {
      this.pageInfo.pageNum = pageNum
      this.getList()
    },
    
    /* ================== ClassName相关 ================== */
    getDeviceRegisterStatusClassName(value) {
      if((value ?? '') !== '') {
        switch (+value) {
          case DEVICE_REGISTER_STATUS_UNDO: return 'marker-inactive'
          case DEVICE_REGISTER_STATUS_COMPLETE: return 'marker-active'
        }
      }
    },


    // 创建
    showRegisterDialog(row) {
      this.currentActionRow = row
      this.isShowRegisterDialog = true
    },
    registerComplete() {
      this.isShowRegisterDialog = false
      this.getList()
    },
    // 详情
    showDetailDialog(row) {
      this.currentActionRow = row
      this.isShowDetailDialog = true
    }

  },
  mounted() {
    this.getList()
  }
}
</script>


<style lang="less" scoped>
@import '../../../styles/tablePanel.less';
</style>